<template>
  <ul>
    <!--获取params参数-->
    <li>消息编号：{{$route.query.id}}</li>
    <li>消息标题：{{$route.query.title}}</li>
    <!-- <li>a={{a}}</li>
    <li>b={{b}}</li> -->
    <!--路由中设置了props:true，这里就可以简写-->
    <li>消息编号(props)：{{id}}</li>
    <li>消息标题(props)：{{title}}</li>
  </ul>
</template>

<script>
export default {
    name: 'Detail',
    computed: {
      /* 为了将路由参数映射为计算属性，写起来比较麻烦，可以在router中配置props简化书写
      id() {
        return $route.params.id
      },
      title() {
        return $route.params.title
      }
      */
    },
    // props: ['a', 'b'], //接收路由器中配置的props数据
    props: ['id', 'title'],
    mounted() {
        //路由上的params参数会被放到$route.params中
        console.log('Detail组件获取params参数 ', this.$route)
    }
}
</script>

<style scoped>

</style>